<template>
    <div class="entity-info">


        <div class="btn">
            <div class="avatar" v-if="info.avatar.length > 0">
                <img :src="info.avatar"/>
            </div>
            <el-button
                    type="text"
                    @click="onViewEntity"
            >
                {{info.name}}
            </el-button>
        </div>



    </div>
</template>

<script lang="ts">

    import {Vue, Component, Prop} from 'vue-property-decorator'

    interface Info {
        id: string
        name: string
        avatar: string
    }

    @Component({
        name: "AdminEntityInfo"
    })
    export default class AdminEntityInfo extends Vue {

        @Prop({
            required: true,
            type: String
        })
        id;

        @Prop({
            required: false,
            type: String,
            default: 'medium'
        })
        size;

        @Prop({
            required: true,
            type: String
        })
        type;

        @Prop({
            required: false,
            type: Boolean,
            default: false,
        })
        remote;

        @Prop({
            required: false,
            type: String,
            default: ''
        })
        avatar;

        @Prop({
            required: false,
            type: String,
            default: ''
        })
        name;


        info: Info = {
            id: "",
            name: "",
            avatar: "",
        };

        avatarClass: string = "avatar";

        loadView() {

            this.info.id = this.id;
            this.info.name = this.name;
            this.info.avatar = this.avatar;
        }

        mounted() {
            this.loadView()
        }


        onViewEntity() {


            if(this.type === "star") {
                this.$router.push({
                    path:`/stars/${this.info.id}`
                })
            }

            if(this.type === "club") {
                this.$router.push({
                    path:`/stars/club/editor/${this.info.id}`
                })
            }

            if(this.type === "user") {
                this.$router.push({
                    path:`/user/${this.info.id}`
                })
            }
        }

    }
</script>

<style lang="scss" scoped>
    .entity-info {

        padding: 0px;


        .btn {
            display: flex;
            flex-direction: row;

            .el-button {
                padding: 0px;
                line-height: 12px;
                height: 28px;
            }

        }


        .avatar {
            img {
                position: relative;
                display: inline-block;
                width: 28px;
                height: 28px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
            }
        }
    }
</style>